<template>
  <div class="roles">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>角色列表</span>
        <el-button
          class="qf-r qf-create-btn"
          type="primary"
          round
          @click="jump('roles/create')"
          >创建角色</el-button
        >
      </div>

      <qf-table :tableData="tableData" :columns="columns" />

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-card>

    <Edit :state="editState" @close="editState = false"></Edit>
    <EditAuth :state="editAuthState" @close="editAuthState = false"></EditAuth>
  </div>
</template>

<script>
import tableData from "~mock/roles/index.js";
import Edit from "./components/Edit.vue";
import EditAuth from "./components/EditAuth.vue";

export default {
  components: {
    Edit,
    EditAuth,
  },
  data() {
    return {
      editState: false,
      editAuthState: false,

      params: {
        pagenum: 1,
      },

      tableData: tableData.data,

      columns: [
        { title: "编号", field: "id" },
        { title: "角色名称", field: "role_name" },
        { title: "角色描述", field: "role_desc" },
        {
          title: "操作",
          width: "260",
          type: "btn",
          payload: [
            {
              name: "分配权限",
              type: "primary",
              click: (row) => {
                console.log("分配", row);

                this.editAuthState = true;
              },
            },
            {
              icon: "el-icon-edit",
              type: "success",
              click: (row) => {
                console.log("编辑", row);

                this.editState = true;
              },
            },
            {
              icon: "el-icon-delete",
              type: "danger",
              click: (row) => this.deleteFn(row),
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style></style>
